import * as React from 'react';
import dayjs from 'dayjs';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { h0 } from '@/utils/fp';
import Header from '@/commonComponents/header/Header';
import Detail from '@/commonComponents/detail/Detail';
import { useAppSelector, useAppDispatch } from '@/app/hooks';
import { selectOrder, getOrderAsync } from './indexSlice';
import Ticket from './components/Candidate/index';
import Passengers from './components/passengers/index';
import Choose from './components/choose/index';
import Menu from './components/menu/index';
import Account from './components/account/index';

import './index.module.scss';

const { memo, useState, useEffect } = React;
function Order() {
  const dispatch = useAppDispatch();
  const [params] = useSearchParams();
  const departStation = params.get('dStation') || '';
  const trainNumber = params.get('trainNumber') || '';
  const arriveStation = params.get('aStation') || '';
  const seatType = params.get('type') || '';
  const aTime = params.get('aTime') || '';
  const dTime = params.get('dTime') || '';
  const time = params.get('time') || '';

  // const { aStation, dStation, date, trainNumber } = searchParams;
  // 回到上一页
  const date = params.get('date');
  const tempDepartDate = h0(dayjs(date).valueOf());
  const [departDate, setDepartDate] = useState(tempDepartDate);
  const [passengers, setPassengers] = useState<any>([]);
  // 回到上一页
  const navigate = useNavigate();
  const onBack = () => {
    navigate(-1);
  };
  useEffect(() => {
    dispatch(
      getOrderAsync({
        date: dayjs(departDate).format('YYYY-MM-DD'),
        dStation: departStation,
        type: seatType,
        aStation: arriveStation,
      })
    );
  }, [date, arriveStation, seatType, departStation]);

  const data = useAppSelector(selectOrder);
  const { departTimeStr, arriveTimeStr, arriveDate, durationStr } = data;

  // const TrainContext = createContext({});
  const [showMenu, setShowMenu] = useState(false);
  const onPress = () => {
    // console.log('onPress');
  };

  //订单提交
  // const [visiable, setVisiable] = useState(false);
  //传过来的乘客信息
  const getPassengers = (val: any) => {
    setPassengers(val);
  };
  return (
    <div styleName="order-app">
      <div styleName="header-wrapper">
        <Header title="订单填写" onBack={onBack} />
      </div>
      <div styleName="detail-wrapper">
        <Detail
          departDate={departDate}
          arriveDate={arriveDate}
          departTimeStr={departTimeStr}
          arriveTimeStr={arriveTimeStr}
          trainNumber={trainNumber}
          departStation={departStation}
          arriveStation={arriveStation}
          durationStr={durationStr}
          aTime={aTime}
          dTime={dTime}
          time={time}
        >
          <span style={{ display: 'block' }} styleName="train-icon"></span>
        </Detail>
      </div>
      <Ticket price="$100" type="二等座" />
      <Passengers onChange={getPassengers} setPassengers={setPassengers} />
      <Choose />
      <Account
        departDate={departDate}
        arriveDate={arriveDate}
        departTimeStr={departTimeStr}
        arriveTimeStr={arriveTimeStr}
        trainNumber={trainNumber}
        departStation={departStation}
        arriveStation={arriveStation}
        durationStr={durationStr}
        passengers={passengers}
        length={2}
        price={100}
        aTime={aTime}
        dTime={dTime}
        time={time}
      />
      <Menu show={showMenu} hideMenu={setShowMenu} onPress={onPress} />
      {/* <TrainContext.Provider
        value={{
          trainNumber,
          departStation,
          arriveStation,
          departDate,
        }}
      >
        <Candidate tickets={candidates} />
      </TrainContext.Provider> */}
    </div>
  );
}

export default memo(Order);
